<!doctype html>
<html class="no-js">
<head>
    <title>考勤系统</title>
    <link rel="icon" type="image/png" href="../i/favicon.png">
    <link rel="apple-touch-icon-precomposed" href="../i/app-icon72x72@2x.png">
    <meta name="apple-mobile-web-app-title" content="主页"/>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <link rel="stylesheet" href="../css/amazeui.min.css"/>
    <link rel="stylesheet" href="../css/admin.css">
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/bootstrap-table.css">
    <link rel="stylesheet" type="text/css" href="../jquery-easyui-1.4.5/themes/gray/easyui.css">
    <link rel="stylesheet" type="text/css" href="../jquery-easyui-1.4.5/themes/icon.css">

    <script src="../js/jquery.min.js"></script>
    <script src="../js/modernizr.js"></script>
    <script src="../js/amazeui.ie8polyfill.min.js"></script>
    <script src="../js/amazeui.min.js"></script>
    <script src="../js/app.js"></script>
    <script src="../js/jquery.dataTables.min.js"></script>
    <script src="../js/bootstrap-table.js"></script>
    <script src="../js/bootstrap-table-zh-CN.js"></script>
    <script src="../js/jquery.easyui.min.js"></script>
    <script src="../jquery-easyui-1.4.5/locale/easyui-lang-zh_CN.js"></script>
</head>
<body>

<header class="am-topbar am-topbar-inverse admin-header">
    <div class="am-topbar-brand">
        <strong>xxxxxx</strong>
        <small>考勤系统</small>
    </div>

    <button class="am-topbar-btn am-topbar-toggle am-btn am-btn-sm am-btn-success am-show-sm-only"
            data-am-collapse="{target: '#topbar-collapse'}"><span class="am-sr-only">导航切换</span> <span
            class="am-icon-bars"></span></button>

    <div class="am-collapse am-topbar-collapse" id="topbar-collapse">

        <ul class="am-nav am-nav-pills am-topbar-nav am-topbar-right admin-header-list">
            <li><a href="javascript:;"><span class="am-icon-envelope-o"></span> 消息 <span
                    class="am-badge am-badge-warning">5</span></a></li>
            <li class="am-dropdown" data-am-dropdown>
                <a class="am-dropdown-toggle" data-am-dropdown-toggle href="javascript:;">
                    <span class="am-icon-users"></span> 管理员 <span class="am-icon-caret-down"></span>
                </a>
                <ul class="am-dropdown-content">
                    <li><a href="#"><span class="am-icon-user"></span> 资料</a></li>
                    <li><a href="#"><span class="am-icon-cog"></span> 设置</a></li>
                    <li><a href="#"><span class="am-icon-power-off"></span> 退出</a></li>
                </ul>
            </li>
            <li class="am-hide-sm-only"><a href="javascript:;" id="admin-fullscreen"><span
                    class="am-icon-arrows-alt"></span> <span class="admin-fullText">开启全屏</span></a></li>
        </ul>
    </div>
</header>

<div class="am-cf admin-main">
    <!-- sidebar start -->
    <div class="admin-sidebar am-offcanvas" id="admin-offcanvas">
        <div class="am-offcanvas-bar admin-offcanvas-bar">
            <ul class="am-list admin-sidebar-list">
                <li><a href="index.html"><span class="am-icon-home"></span> 首页</a></li>
                <li class="admin-parent">
                    <a class="am-cf" data-am-collapse="{target: '#collapse-basic'}">
                        <span class="am-icon-file"></span> 基本信息 <span
                            class="am-icon-angle-right am-fr am-margin-right"></span></a>
                    <ul class="am-list am-collapse admin-sidebar-sub am-in" id="collapse-basic">
                        <li><a href="employee.html"><span class="am-icon-home"></span> 员工信息</a></li>
                        <li><a href="department.html"><span class="am-icon-home"></span> 部门信息</a></li>
                        <li><a href="type.html"><span class="am-icon-home"></span> 假期类型信息</a></li>
                    </ul>
                </li>
                <li class="admin-parent">
                    <a class="am-cf" data-am-collapse="{target: '#collapse-nav'}">
                        <span class="am-icon-file"></span> 出勤管理 <span
                            class="am-icon-angle-right am-fr am-margin-right"></span></a>
                    <ul class="am-list am-collapse admin-sidebar-sub am-in" id="collapse-nav">
                        <li><a href="apply.html" class="am-cf"><span class="am-icon-check"></span> 打卡记录<span
                                class="am-icon-star am-fr am-margin-right admin-icon-yellow"></span></a></li>
                        <li><a href="admin-help.html"><span class="am-icon-puzzle-piece"></span> 员工请假信息</a></li>
                        <li><a href="admin-gallery.html"><span class="am-icon-th"></span> 个人请假统计</a></li>
                        <li><a href="admin-log.html"><span class="am-icon-calendar"></span> 休假时间调整</a></li>
                    </ul>
                </li>
                <li><a href="admin-table.html"><span class="am-icon-pencil-square-o"></span> 申请假期</a></li>
                <span class="am-badge am-badge-secondary am-margin-right am-fr">24</span></a></li>
                <li><a href="personalRecord.html"><span class="am-icon-table"></span> 个人打卡记录</a></li>
                <li><a href="#"><span class="am-icon-table"></span> 查看请假申请</a></li>
            </ul>

            <div class="am-panel am-panel-default admin-sidebar-panel">
                <div class="am-panel-bd">
                    <p><span class="am-icon-bookmark"></span> 公告</p>

                    <p>XX公司出勤管理系统</p>
                </div>
            </div>

        </div>
    </div>
    <!-- sidebar end -->

    <!-- content start -->
    <div class="admin-content" id="content-body">
        <div class="admin-content-body">
            <div class="am-cf am-padding am-padding-bottom-0">
                <div class="am-fl am-cf"><strong class="am-text-primary am-text-lg">员工信息</strong>
                </div>
            </div>

            <hr>

            <!--fffffffff-->
            <div id="toolbar">

                <!--<a href="javascript:void(0)" class="easyui-datebox"  plain="true",style="width:auto"-->
                   <!--onclick="">开始日期</a>-->
                <!--<a href="javascript:void(0)" class="easyui-datebox" plain="true"-->
                   <!--onclick="">结束日期</a>-->

                <form id="form-group">
                    <div class="form-group">
                    <!--编号:-->
                    <!--<input id="id" type="number" class="easyui-textbox" name="id">-->
                        <!--&nbsp&nbsp&nbsp-->

                        <label for="deptId">部门:</label>
                        <input id="deptId" class="easyui-combobox" name="deptId" style="width:auto;height:26px;"
                               data-options="
                        valueField:'id',
                        textField:'name',
                        url:'../department?rows=100000',
                        method:'get',
                        loadFilter: function (data){
                            return data.result.list;
                        }" editable="false" required="true">

                            <label for="startDate">开始时间:</label>
                            <input id="startDate" class="easyui-datebox" name="startDate">

                            <label for="endDate">结束时间:</label>
                            <input id="endDate" class="easyui-datebox" name="endDate">

                            <a href="javascript:void(0);" class="easyui-linkbutton" iconCls="icon-search" plain="true"
                               onclick="doSearchStats()">查询</a>
                        </div>

                </form>




            <!--</div>-->
            <!--<br>-->





        </div>



            <table id="dg" title="用户" class="easyui-datagrid" style="width:auto"
                   toolbar="#toolbar" pagination="true"
                   rownumbers="true" fitColumns="true" singleSelect="true" data-options="fit:true,fitColumns:true">
                <thead>
                <tr>
                    <th field="id" width="50" sortable="true" data-options="formatter:
                        function(value,row){
                            var employee = row.id;
                            var id = employee.id;
                            return id;
                        }">编号</th>
                    <th field="name" width="50" data-options="formatter:
                        function(value,row){
                            var str = row.id.name;
                            return str;
                        }">姓名</th>
                    <th field="dept" width="50" data-options="formatter:
                        function(value,row){
                            var str = row.id.departmentId;
                            var deptName = str;

                            <!--$.get('../department?,callback);-->
                            return str;
                        }">部门</th>
                    <th field="numWorkDay" width="50" >工作天数</th>
                    <th field="sickleave" width="50" data-options="formatter:
                        function(value,row){
                            var num = 0;
                            for (var i = 0; i < row.approvedApplyNum.length; i++){
                                v = row.approvedApplyNum[i];
                                <!--病假是1-->
                                if (v.type == 1){
                                    num = v.number;
                                }
                            }
                        return num;
                        }">已休病假天数</th>
                    <th field="casualleave" width="50" data-options="formatter:
                        function(value,row){
                            var num = 0;
                            for (var i = 0; i < row.approvedApplyNum.length; i++){
                                v = row.approvedApplyNum[i];
                                <!--事假是2-->
                                if (v.type == 2){
                                    num = v.number;
                                }
                            }
                        return num;
                        }">已休事假天数</th>
                    <th field="maternityleave" width="50" data-options="formatter:
                        function(value,row){
                            var num = 0;
                            for (var i = 0; i < row.approvedApplyNum.length; i++){
                                v = row.approvedApplyNum[i];
                                if (v.type == 5 || v.type ==6){
                                    num = v.number;
                                }
                            }
                        return num;
                        }">已休生育假天数</th>
                    <th field="businesstrip" width="50" data-options="formatter:
                        function(value,row){
                            var num = 0;
                            for (var i = 0; i < row.approvedApplyNum.length; i++){
                                v = row.approvedApplyNum[i];
                                <!--出差是4-->
                                if (v.type == 4){
                                    num = v.number;
                                }
                            }
                        return num;
                        }">出差天数</th>
                    <th field="anualleave" width="50" data-options="formatter:
                        function(value,row){
                            var num = 0;
                            for (var i = 0; i < row.approvedApplyNum.length; i++){
                                v = row.approvedApplyNum[i];
                                <!--年假是3-->
                                if (v.type == 3){
                                    num = v.number;
                                }
                            }
                        return num;
                        }">已休年假天数</th>
                    <th field="anualremain" width="50" data-options="formatter:
                        function(value,row){
                            <!--员工初始年假是10天-->
                            var num = 10;
                            for (var i = 0; i < row.approvedApplyNum.length; i++){
                                v = row.approvedApplyNum[i];
                                <!--年假是3-->
                                if (v.type == 3){
                                    num = v.rest;
                                }
                            }
                        return num;
                        }">剩余年假天数</th>


                </tr>
                </thead>



            </table>




        </div>


        <footer class="admin-content-footer">
            <hr>
            <p class="am-padding-left">© 2019 </p>
        </footer>

    </div>
    <!-- content end -->
</div>

<a href="#" class="am-icon-btn am-icon-th-list am-show-sm-only admin-menu"
   data-am-offcanvas="{target: '#admin-offcanvas'}"></a>

<script src="../js/util.js"></script>
<script>



// get stats of all employees
    $(function () {
        $("#dg").datagrid({
            url: "../stats",
            method: 'get',
            loadFilter: function (data) {
                return {
                    "total": data.result.total,
                    "rows": data.result.list
                }
            }
        });
    });

    $(function () {
        $("#dg").datagrid({
            url: "../stats",
            method: 'get',

            loadFilter: function (data) {
                return {
                    "total": data.result.total,
                    "rows": (data).result.list
                }
            }
        });
    });

    function doSearchStats() {
        if ($("#toolbar").form('validate')) {
            var jsondata = JSON.form2param($('#searchForm').serializeArray());
            console.log(jsondata);
            $('#dg').datagrid('load', jsondata);
        }
    }

</script>
</body>
</html>
